<template>
  <nav class="tab-list">
    <tab-sub v-for="(item,index) in cityDatas" :city-info="item" :key="index"></tab-sub>
  </nav>
</template>

<script>
   import cityDatas from '@/assets/data/cities.js';
   import TabSub from './Sub.vue';
   export default{
     name:'Tab',
     data:function(){
       return {
         cityDatas
       }
     },
     components:{
       TabSub
     }
   }
</script>

<style lang="scss" scoped="scoped">
  @import '~styles/mixins.scss';
  @import '~styles/variables.scss';

  .tab-list{
    @include flex-row;
    @include vh-center;
    flex-wrap: nowrap;
    background-color: #fff;
  }
</style>
